import React, {
    Component,
    PropTypes
} from 'react';
import Todo from './Todo';

export default class TodoList extends Component {
    render() {
        const {
            visibleTodos,
            onToggleClick,
            onRemoveClick
        } = this.props;

        return (
            <ul className="todo-list">
                {visibleTodos.map(todo => <Todo key={todo.todoId} todo={todo} onToggleClick={() => onToggleClick(todo.todoId)} onRemoveClick={() => onRemoveClick(todo.todoId)}/>)}
            </ul>
        );
    }
}

TodoList.propTypes = {
    visibleTodos: PropTypes.arrayOf(PropTypes.shape({
        completed: PropTypes.bool,
        text: PropTypes.string,
        todoId: PropTypes.string
    }).isRequired).isRequired,
    onToggleClick: PropTypes.func.isRequired,
    onRemoveClick: PropTypes.func.isRequired
}